<!-- 课程列表页面 (Vue 3 + Composition API) -->
<template>
  <div id="index">
    <el-row class="topbar">
      <el-col :span="2" class="topbar-left">
        <el-text @click="getCourses">所有课程</el-text>
      </el-col>
      <el-col :span="2" class="topbar-left">
        <el-text>已结束的课程</el-text>
      </el-col>
    </el-row>

    <div class="grid-container">
      <el-row :gutter="20">
        <!-- 新建课程窗格 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-card class="create-card" shadow="hover" @click="openDialog">
            <div class="create-text">创建一个新课程</div>
          </el-card>
        </el-col>

        <!-- 课程列表 -->
        <el-col
          v-for="course in courses"
          :key="course.id"
          :xs="24" :sm="12" :md="8" :lg="6"
        >
          <el-card class="course-card" shadow="hover" @click="() => selectCourse(course)">
            <div class="card-header">
              <span class="course-name">{{ course.courseName }}</span>
            </div>
            <div class="card-body">
              <p class="description">{{ course.description }}</p>
              <p class="meta">
                <span>创建时间：{{ course.createTime }}</span><br />
                <span>教师：{{ course.teacherName }}</span>
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 创建课程对话框 -->
    <el-dialog title="创建新课程" v-model="dialogVisible" width="500px">
      <el-form label-width="100px">
        <el-form-item label="课程名称">
          <el-input v-model="newCourseName" placeholder="输入课程名称" />
        </el-form-item>
        <el-form-item label="课程描述">
          <el-input
            type="textarea"
            :rows="4"
            v-model="newCourseDesc"
            placeholder="输入课程描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useCookies } from 'vue3-cookies';
import { ElMessage } from 'element-plus';

const router = useRouter();
const { cookies } = useCookies();

const courses = ref([]);
const dialogVisible = ref(false);
const newCourseName = ref('');
const newCourseDesc = ref('');

const getCourses = async () => {
  const teacherID = cookies.get('cid');
  if (!teacherID) {
    ElMessage.error('未获取到教师ID，请重新登录');
    return;
  }
  try {
    const res = await axios.get('/api/course/teacherid', { params: { teacherID } });
    if (res.data && Array.isArray(res.data)) {
      courses.value = res.data;
    } else {
      ElMessage.error('课程数据格式错误');
    }
  } catch (err) {
    console.log(err);
    ElMessage.error('获取课程列表失败');
  }
};

const selectCourse = (course) => {
  cookies.set('selectedCourse', JSON.stringify(course));
  ElMessage({ type: 'success', message: `已选择课程：${course.courseName}` });
  router.push('/teacher/courseManage');
};

function openDialog(){
  console.log("try show create course window")
  newCourseName.value = '';
  newCourseDesc.value = '';
  dialogVisible.value = true;
  console.log(dialogVisible)
}

const handleSubmit = async () => {
  if (!newCourseName.value) {
    ElMessage.warning('请填写课程名称');
    return;
  }
  const teacherID = cookies.get('cid');
  const payload = {
    courseName: newCourseName.value,
    description: newCourseDesc.value,
    teacherID: Number(teacherID)
  };
  try {
    const res = await axios.post('/api/course/insert', payload);
    if (res.data && res.data.code === 200) {
      ElMessage.success('新增课程成功！');
      getCourses();
      dialogVisible.value = false;
    } else {
      ElMessage.error(res.data.msg || '新增课程失败');
    }
  } catch (err) {
    ElMessage.error('提交失败，请稍后重试');
  }
};

onMounted(getCourses);
</script>

<style lang="less" scoped>
#index {
  padding: 20px;
  background-color: #f5f7fa;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 40px;
}
.topbar {
  margin-bottom: 20px;
}
.topbar-left {
  cursor: pointer;
}
.grid-container {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}
.create-card {
  cursor: pointer;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: #fafafa;
  border: 2px dashed #ccc;
}
.create-card:hover {
  border-color: #409EFF;
}
.create-text {
  color: #909399;
  font-size: 16px;
}
.course-card {
  cursor: pointer;
  margin-bottom: 20px;
  background: #eff;
}
.course-card:hover {
  border-color: #409EFF;
}
.card-header {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10px;
}
.card-body .description {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}
.card-body .meta {
  font-size: 12px;
  color: #909399;
}
</style>
